<template>
    <a-form :form="form" @submit="handleSubmit">
        <!-- 联系人姓名 -->
        <a-form-item>
            <a-input type="text" placeholder="联系人姓名" autocomplete="off"
                     v-decorator="[
                        'contactName',
                        {rules: [
                            { required: true, message: '请输入联系人姓名' },
                            { pattern: /^[\u2E80-\u9FFF]+$/,message: '请输入正确的联系人姓名' }
                        ]}
                    ]">
                <a-icon slot="prefix" type="user" />
            </a-input>
        </a-form-item>
        <!-- 联系人电话 -->
        <a-form-item>
            <a-input placeholder="请输入联系人电话" autocomplete="off" type="text"
                     v-decorator="[
                        'contactMobile',
                        { rules: [
                            { required: true, message: '请输入手机号码' },
                            { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,message: '请输入正确的手机号码' }
                        ] }
                     ]"
            >
                <a-icon slot="prefix" type="mobile" />
            </a-input>
        </a-form-item>
        <!-- 联系人邮箱 -->
        <a-form-item>
            <a-input type="text" placeholder="请输入联系人邮箱" autocomplete="off"
                     v-decorator="[
                        'contactEmail',
                        { rules: [
                            { required: true, message: '请输入邮箱' },
                            { pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,message: '请输入正确的邮箱' },
                            { max:25, message:'邮箱地址太长了' },
                        ] }
                    ]">
                <a-icon slot="prefix" type="mail" />
            </a-input>
        </a-form-item>
        <!-- 个人身份证 -->
        <a-form-item>
            <a-input type="text" placeholder="请输入身份证号码" autocomplete="off"
                     v-decorator="[
                        'identity',
                        { rules: [
                            { required: true, message: '请输入身份证号码' },
                            {
                                pattern: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
                                message: '请输入正确的身份证号码'
                            }
                        ] }
                    ]">
                <a-icon slot="prefix" type="idcard" />
            </a-input>
        </a-form-item>
        <!-- 账号类型 -->
        <a-form-item style="display: none;">
            <a-input type="text" v-decorator="[ 'identityFlag',{ initialValue : 'personal' } ]" />
        </a-form-item>

        <a-button type="primary" html-type="submit" block>提&nbsp;交</a-button>
    </a-form>
</template>

<script>
    export default {
        data(){
            return {
                form : this.$form.createForm(this),
            };
        },
        props : {
            submitDataFn : { type : Function, required : true },
        },
        methods : {
            handleSubmit : function(e) {
                e.preventDefault();
                let $this = this;
                $this.form.validateFields((err, params) => {
                    if (!err){
                        $this.submitDataFn(params);
                    }
                });
            }
        }
    }
</script>
